<#include "/admin/_inc/_head.html"/>
<#include "/admin/_inc/_layout.html" />
<!DOCTYPE html>
<html lang="en">

<head>
    <@head />
    <link href="/assets/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="/assets/js/plugins/zTree/v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .mfs-container {
            /* min-width: 150px;max-height: 100px;  */
            /* position: relative; */
        }

        .mfs-selected-option {
            border: 1px #ccc solid;
            display: inline-block;
            width: 100%;
            font-size: 14px;
            height: 31px;
            line-height: 2.42857;
            padding-left: 4px;
        }

        .mfs-options {
            position: absolute;
            border: 1px #ccc solid;
            /* border-top:0px; */
            width: 100%;
            margin: 0;
            padding: 0px;
            color: #333;
            overflow: auto;
            min-height: 100px;
            max-height: 300px;
            background: #ffffff;
            z-index: 9;
            margin-top: -6px;
        }
    </style>
</head>

<body>
    <@layout>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">

                <div class="ibox-content">
                    <form id="form" role="form" action="<#if model?exists>${ctx_admin}/article/update<#else>${ctx_admin}/article/add</#if>" method="post">

                        <div class="row">

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label" for="title">
                                        文章标题：<span class="symbol required" aria-required="true"></span>
                                    </label>

                                    <input type="hidden" id="articleId" name="articleId" value="${model.articleId}">
                                    <input id="title" type="text" class="form-control required" placeholder="" name="title"
                                           value="${model.title}">
                                </div>

                                <div class="form-group">
                                    <label class="control-label" for="categoryId">
                                        分类栏目：<span class="symbol required" aria-required="true"></span>
                                    </label>
                                    <input type="text" class="categoryPId form-control required" id="categoryId"
                                           name="categoryId" placeholder="" readonly="readonly" value="${model.categoryId}">
                                </div>

                                <!--<div class="form-group">-->
                                <!--<label class="control-label" for="sort">-->
                                <!--排序：-->
                                <!--</label>-->
                                <!--<input type="text" id="sort" name="sort" placeholder="排序" class="form-control" value="${model.sort}">-->
                                <!--</div>-->

                                <div class="form-group">
                                    <label class=" control-label" for="">
                                        缩略图：
                                    </label>

                                    <input type="text" id="image" name="image" value="${model.image}"
                                           class="form-control" readonly required aria-required="true"
                                           style="display: inline-block; vertical-align: middle;">

                                    <span class="btn btn-primary fileinput-button">
                                    <i class="fa fa-cloud-upload"></i>
                                    <span>上传图片</span>
                                    <input id="fileupload" type="file" name="file" multiple>
                                    </span>


                                </div>

                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">

                                    </label>
                                    <div class="checkbox i-checks">
                                        <input class="" type="checkbox" value="1" name="recommendType" <#if model.recommendType==1> checked="checked"</#if> >推荐
                                    </div>

                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="control-label" for="sort">
                                                排序：
                                            </label>
                                            <input type="text" id="sort" name="sort" placeholder="排序" class="form-control"
                                                   value="${model.sort}">
                                        </div>
                                    </div>

                                </div>

                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-10">
                                        <div class="form-group">
                                            <label class=" control-label" for="keywords">
                                                关键字：
                                            </label>
                                            <input id="keywords" type="text" name="keywords" placeholder="关键字"
                                                   class="form-control" value="${model.keywords}">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-11">
                                        <div class="form-group">
                                            <label class="control-label" for="description">
                                                文章摘要：
                                            </label>
                                            <textarea id="description" rows="5" name="description"
                                                      placeholder="说点什么...最少输入10个字符" class="form-control">${model.description}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="row">

                            <div class="col-sm-12">
                                <div class="row">
                                    <div class="col-sm-11">
                                        <div class="form-group">
                                            <label class="control-label"></label>
    <input type="hidden" name="content" id="content">
                                            <script id="editor" type="text/plain" style="width: 100%;"></script>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-7">
                                <p>

                                </p>
                            </div>
                            <div class="col-md-4">
                                <button class="btn btn-primary btn-wide pull-right" type="submit">
                                    确定
                                </button>
                            </div>
                        </div>

                    </form>

                </div>
            </div>
        </div>
    </div>


    </@layout>

<script src="/assets/js/plugins/iCheck/icheck.min.js"></script>
<script src="/assets/js/plugins/validate/jquery.validate.min.js"></script>
<script src="/assets/js/plugins/validate/messages_zh.min.js"></script>
<script src="/assets/js/plugins/jquery.form/jquery.form.js"></script>
<script type="text/javascript" src="/assets/js/plugins/zTree/v3/js/jquery.ztree.all-3.5.js"></script>
<script type="text/javascript" src="/assets/js/droptree.js"></script>

<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"></script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script>

<script src="/assets/js/plugins/jquery-file-upload/vendor/jquery.ui.widget.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="/assets/js/plugins/javascript-Load-Image/load-image.all.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.fileupload-image.js"></script>
<!-- The File Upload audio preview plugin -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.fileupload-audio.js"></script>
<!-- The File Upload video preview plugin -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.fileupload-video.js"></script>
<!-- The File Upload validation plugin -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.fileupload-validate.js"></script>
<!-- The File Upload user interface plugin -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.fileupload-ui.js"></script>

    <script type="text/javascript" src="/assets/js/cms/article/article_edit.js"></script>
    <script type="text/javascript">
        $(".i-checks").iCheck({checkboxClass: "icheckbox_square-green", radioClass: "iradio_square-green",});
        $(function () {
            $.ajax({
                type: "POST",
                data: {},
                dataType: 'json',
                url: '/article/content/${model.articleId?default("0")}',
                success: function (res) {
                    if (res.success) {

                        var data = res.data;
                        if (!data || !data.content) {
                            return;
                        }

                        ue.ready(function () {
                            ue.setContent(encodeEscape.escape2Html(data.content));

                        });
                    }
                }
            });

            $('#fileupload').fileupload({
                //inputid:'fileupload',//我要实例化哪个标签
                url: '/upload/article',//服务端的地址
                dataType: 'json',//数据格式，ajax你懂的
                autoUpload: true,//是否选了文件就直接自动上传
                maxNumberOfFiles: 1,//最多同时上传几个文件
                maxFileSize: 5000000,
                acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
                //maxChunkSize:10000,//最大接收文件大小
                done: function (e, data) {//上传完了干嘛
                    var res = data.result;
                    if (res.success) {
                        $('#image').val(res.url);
                        layer.msg(res.message, {icon: 1, time: 2000}, function () {
                        });
                    } else {
                        layer.msg(res.message, {icon: 2, time: 3000}, function () {
                        });
                    }

                },
                progressall: function (e, data) {//上传过程中，隔段时间就会调起的回调函数，这个东西，主要是用来返回进度的，你看里面的引用，没错，它带回来的参数值，只有total、loaded这种数字。

                },
                processalways: function (e, data) {
                }
            }).prop('disabled', !$.support.fileInput)
                    .parent().addClass($.support.fileInput ? undefined : 'disabled');//不用猜了，就是看看是不是支持jqueryajax上传方式。就是上面说的那个frame东东。



            $("#form").validate({
                submitHandler:function(form){
                    form.content.value=ue.getContent();
                    $(form).ajaxSubmit({
                        type: 'post',
                        url: form.action ,
                        success: function(data){
                            if(data.success){
                                layer.msg(data.message, {icon: 1,time: 2000 }, function(){
                                    var index = parent.layer.getFrameIndex(window.name);
                                    parent.$table.bootstrapTable('destroy');
                                    parent.initTable();
                                    parent.layer.close(index);
                                });
                            }else{
                                layer.msg(data.message, {icon: 2,time: 3000 }, function(){});
                            }
                        },
                        error: function(XmlHttpRequest, textStatus, errorThrown){
                            layer.msg('error!', {icon: 2,time: 3000 }, function(){});
                        }
                    });
                }
            });
        });


    </script>


</body>

</html>